import XAMap from '@/components/XAMap';
import { Form, Input, InputNumber } from 'antd';
import { PureComponent } from 'react';

interface LngLat {
  lat?: number;
  lng?: number;
}

interface ComponentProps {
  value?: LngLat;
  onChange?: (lnglat: LngLat) => void;
}

interface ComponentState {
  lnglat: LngLat;
}

export default class InputLnglat extends PureComponent<ComponentProps, ComponentState> {
  state = {
    lnglat: { lat: this.props.value?.lat, lng: this.props.value?.lng },
  };

  onChange(lnglat: LngLat) {
    const { onChange, value } = this.props;
    console.log(value?.lat);
    const lnglatObj = lnglat;

    this.setState({ lnglat: lnglatObj }, () => {
      if (onChange) {
        onChange(lnglatObj);
      }
    });
  }

  render() {
    // const { value } = this.props;
    const { lnglat } = this.state;
    return (
      <div>
        <Input.Group {...this.props} compact>
          <Form.Item
            label="经度："
            style={{ fontSize: 21 }}
            // rules={[{ required: true, message: '请输入停车场经纬度' }]}
          />
          <InputNumber
            style={{ width: 194 }}
            value={lnglat.lng}
            max={180}
            min={-180}
            size={'large'}
            // onChange={(val = 0) => this.onChange({ lng: val, lat })}
          />
          <div style={{ width: 30 }}></div>
          <Form.Item
            label="纬度："
            style={{ fontSize: 21 }}
            // rules={[{ required: true, message: '请输入停车场经纬度' }]}
          />
          <InputNumber
            style={{ width: 194 }}
            value={lnglat.lat}
            max={90}
            min={-90}
            size={'large'}
            // onChange={(val = 0) => this.onChange({ lng, lat: val })}
          />
        </Input.Group>
        <XAMap
          container="map-container"
          apiLoaderOptions={{
            key: 'f85bb9cc28065ad66dd1d6b80fb5d5ab',
          }}
          height={300}
          width="100%"
          coordinateListener={(coordinate) => {
            this.onChange({ lng: coordinate.lng, lat: coordinate.lat });
          }}
        />
      </div>
    );
  }
}
